<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>景点审核管理</title>
    <!-- 引入 Vue.js -->
    <script src="/js/vue.js"></script>
    <!-- 引入 Element UI CSS -->
    <link type="text/css" rel="stylesheet" href="/css/index.css">
    <!-- 引入 Element UI JS -->
    <script src="/js/index.js"></script>
    <!-- 引入 Axios -->
    <script src="/js/axios.min.js"></script>
    <style>
        .app-container {
            padding: 20px;
            background-color: #f5f7fa;
            min-height: 100vh;
        }
        .search-container {
            margin-bottom: 20px;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .table-container {
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .action-buttons {
            display: flex;
            gap: 8px;
            justify-content: center;
        }
        .pagination-container {
            margin-top: 20px;
            text-align: right;
        }
        .dialog-footer {
            text-align: right;
        }
        .status-pending {
            color: #909399;
            font-weight: bold;
        }
        .status-passed {
            color: #67C23A;
            font-weight: bold;
        }
        .status-rejected {
            color: #F56C6C;
            font-weight: bold;
        }
        .status-deleted {
            color: #909399;
            font-weight: bold;
            text-decoration: line-through;
        }
        .attraction-image-container {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 100px;
            overflow: hidden;
        }
        .attraction-image {
            width: 100px;
            height: 100px;
            object-fit: cover;
        }
    </style>
</head>
<body>
<div id="app" class="app-container">
    <!-- 搜索区域 -->
    <div class="search-container">
        <el-row :gutter="15">
            <el-col :span="5">
                <el-input
                        size="small"
                        v-model="searchForm.attractionName"
                        placeholder="请输入景点名称"
                        prefix-icon="el-icon-search"
                        clearable>
                </el-input>
            </el-col>
            <el-col :span="5">
                <el-select
                        size="small"
                        v-model="searchForm.auditStatus"
                        placeholder="请选择审核状态"
                        style="width: 100%;">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="待审核" value="0"></el-option>
                    <el-option label="已通过" value="1"></el-option>
                    <el-option label="已拒绝" value="2"></el-option>
                </el-select>
            </el-col>
            <el-col :span="14">
                <el-button
                        size="small"
                        type="primary"
                        icon="el-icon-search"
                        @click="search">
                    搜索
                </el-button>
                <el-button
                        size="small"
                        type="success"
                        icon="el-icon-refresh"
                        @click="refreshData">
                    刷新
                </el-button>
            </el-col>
        </el-row>
    </div>

    <!-- 审核列表表格 -->
    <div class="table-container">
        <el-table
                :data="tableData"
                style="width: 100%"
                border
                stripe
                highlight-current-row>
            <el-table-column prop="dotName" label="景点名称" width="150" align="center">
                <template slot-scope="scope">
                    {{ scope.row.dotName || '-' }}
                </template>
            </el-table-column>

            <el-table-column prop="dotAddress" label="地址" width="150" align="center">
                <template slot-scope="scope">
                    {{ scope.row.dotAddress || '-' }}
                </template>
            </el-table-column>

            <!-- 修复：添加封面图片渲染模板 -->
            <el-table-column prop="dotPic" label="封面" width="100" align="center">
                <template slot-scope="scope">
                    <div class="attraction-image-container">
                        <img v-if="scope.row.dotPic"
                             :src="scope.row.dotPic"
                             class="attraction-image"
                             @error="$event.target.src='/img/默认.jpg'">
                        <span v-else>-</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="auditStatus" label="审核状态" width="120" align="center">
                <template slot-scope="scope">
                    <span :class="{
                        'status-pending': scope.row.auditStatus === '0',
                        'status-passed': scope.row.auditStatus === '1',
                        'status-rejected': scope.row.auditStatus === '2',
                        'status-deleted': scope.row.auditStatus === '3'  // 新增删除状态样式

                    }">
                        {{ statusMap[scope.row.auditStatus] }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="auditPeople" label="审核人" width="100" align="center">
                <template slot-scope="scope">
                    {{ scope.row.auditPeople || '-' }}
                </template>
            </el-table-column>

            <el-table-column prop="auditTime" label="审核时间" width="180" align="center">
                <template slot-scope="scope">
                    {{ scope.row.auditTime || '-' }}
                </template>
            </el-table-column>

            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <div class="action-buttons">
                        <el-button
                                size="mini"
                                type="primary"
                                @click="handleAudit(scope.row)">
                            审核
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row)">
                            删除
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="pagination-container">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    background>
            </el-pagination>
        </div>
    </div>

    <!-- 审核弹窗 -->
    <el-dialog
            title="审核操作"
            :visible.sync="dialogVisible"
            width="500px"
            :close-on-click-modal="false">
        <el-form
                :model="form"
                :rules="rules"
                ref="form"
                label-width="100px">
            <el-form-item label="审核结果" prop="auditStatus">
                <el-radio-group v-model="form.auditStatus">
                    <el-radio label="1">通过</el-radio>
                    <el-radio label="2">拒绝</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="拒绝原因" prop="rejectReason" v-if="form.auditStatus === '2'">
                <el-input
                        v-model="form.rejectReason"
                        type="textarea"
                        :rows="3"
                        placeholder="请输入拒绝原因">
                </el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
                <el-input
                        v-model="form.remarks"
                        type="textarea"
                        :rows="3"
                        placeholder="请输入备注">
                </el-input>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitAudit">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                currentPage: 1,
                pageSize: 10,
                total: 0,
                searchForm: {},
                dialogVisible: false,
                form: {
                    auditId: '',
                    auditStatus: '',
                    rejectReason: '',
                    remarks: ''
                },
                currentRow: null,

                statusMap: {
                    '0': '待审核',
                    '1': '已通过',
                    '2': '已拒绝',
                    '3': '景点已删除'
                },

                rules: {
                    auditStatus: [
                        { required: true, message: '请选择审核结果', trigger: 'change' }
                    ],
                    rejectReason: [
                        { required: true, message: '请输入拒绝原因', trigger: 'blur' }
                    ]
                }
            };
        },
        created() {
            this.loadData();
        },
        methods: {
            loadData() {
                let _this = this;
                axios.post('/attractionAudit/queryByPage', {
                    pageNo: this.currentPage,
                    pageSize: this.pageSize,
                    data: this.searchForm,
                }).then(function (response) {
                    console.log("hhhhhhh============"+response.data) // 打印完整响应
                    if (response.data.code === 200) {
                        _this.tableData = response.data.data.list;
                        _this.total = response.data.data.total,
                            console.log("============"+_this.tableData) // 打印完整响应
                    }
                }).catch(function (error) {
                    console.log(error);
                });

            },


            handleSizeChange(val) {
                this.pageSize = val;
                this.loadData();
            },

            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadData();
            },

            search() {
                this.loadData();
            },

            refreshData() {
                this.searchForm = {};
                this.loadData();
            },

            handleAudit(row) {
                // 判断审核状态是否为3（景点已删除）
                if (row.auditStatus === '3') {
                    this.$message.warning('该景点已被删除，无法进行审核操作');
                    return;
                }

                this.currentRow = row;
                this.dialogVisible = true;
                this.form.auditId = row.auditId;
                this.form.auditStatus = row.auditStatus; // 默认显示当前状态
                this.form.rejectReason = row.rejectReason || '';
                this.form.remarks = row.remarks || '';
            },

            submitAudit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        let _this = this;
                        axios.post('/attractionAudit/update', this.form)
                            .then(function (response) {
                                if (response.data.code === 200) {
                                    _this.$message.success('审核成功');
                                    _this.dialogVisible = false;
                                    _this.loadData();
                                } else {
                                    _this.$message.error('审核失败');
                                }
                            }).catch(function (error) {
                            console.log(error);
                        });
                    }
                });
            },

            handleDelete(row) {
                this.$confirm('此操作将永久删除该审核记录，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let _this = this;
                    axios.delete('/attractionAudit/deleteById?auditId=' + row.auditId)
                        .then(function (response) {
                            if (response.data.code === 200) {
                                _this.$message.success('删除成功');
                                _this.loadData();
                            } else {
                                // 有后端错误提示就提示，没有就提示默认的删除失败
                                _this.$message.error(response.data.message || '删除失败');
                            }
                        }).catch(function (error) {
                        console.log(error);
                    });
                }).catch(() => {
                    this.$message.info('已取消删除');
                });
            }
        }
    });
</script>
</body>
</html>
